<template>
    <div>
        <div class="content">
            <div class="zm" id="zm">
                <div class="zsh">
                    证书号：BQY201710311000
                </div>
                <div class="yh">
                    用户
                    <span>张晨光</span>
                </div>
                <div class="zpm">
                    <span>《那年花开》</span>作品符合版权云作品登记标准，获得版权云数字存证证书
                </div>
                <ul>
                    <li>作品编号：20171030000000001</li>
                    <li>数字指纹：8C80C9ECE021C7DC344CAB63EBF832C8E479FA49</li>
                    <li>作品描述：1884年，周滢跟着养父周老四来到关中，输光钱财的周老四将周滢卖到沈家当丫头。周滢逃跑时躲进吴家东院大少爷吴聘的轿中，颇具商业头脑的周滢得到了吴蔚文的赏识，被获许留在吴家...</li>
                </ul>
                <ol>
                    <li>发证日期：2017年10月31日</li>
                    <li>有效期限：2019年10月30日</li>
                </ol>
            </div>
            <div id="downBtn">
                <a class="downloadBtn" :href="download" download="版权云作品登记证书.png">下载证书</a>
                <!--<a class="downloadBtn" href="http://192.168.1.49:8088/platform/api2/public/index.php/copyright/index/downloadzip?files[]=http:%2F%2F192.168.1.49:8088%2Fplatform%2Fapi2%2Fpublic%2Findex.php%5Cupload%5">下载作品样本</a>-->
                <a class="downloadBtn" :href="zip" download>下载作品样本</a>
                <!--<button class="downloadBtn" @click="loadzip">下载作品样本</button>-->
            </div>
        </div>
        <div class="registerBook">
            <p>填写作品创作说明申请作品登记证书</p>
            <!--<router-link to="/">-->
            <button class="downloadBtn" @click="query" v-if="check_status==5">填写并申请</button>
            <router-link to="/user/userRegisterTwo">
                <button class="downloadBtn" v-if="check_status==1">查看订单</button>
            </router-link>
            <!--</router-link>-->
            <p>作品登记证书由贵州版权局审核并颁发，审核7-10个工作日发证</p>
        </div>
    </div>
</template>

<script>
import html2canvas from "@/assets/js/html2canvas.js"; // 转png
import { look, zipUrl, downloadzip, httpHost } from "@/api";
import { mapState, mapMutations } from "vuex";

export default {
    data() {
        return {
            download: "",
            d2: "",
            check_status: 5,
            zip: ""
        };
    },
    computed: {
        ...mapState(["croUser"])
    },
    methods: {
        ...mapMutations(["OUT_LOGIN"]),
        query() {
            let userdel = {
                copyright_number: this.$route.query.copyright_number
            };
            look(userdel).then(data => {
                if (data.data) {
                    //            this.$router.push("/supplement");
                    this.$router.push({
                        path: "supplement",
                        query: {
                            copyright_number: this.$route.query.copyright_number
                        }
                    });
                    sessionStorage.setItem(
                        "product_name",
                        data.data.product_name
                    );
                    sessionStorage.setItem(
                        "product_type ",
                        data.data.product_type
                    );
                }
            });
        },
        loadzip() {
            let str = sessionStorage.getItem("sample_pic");
            this.zip = zipUrl + "/copyright/index/downloadzip?files=" + str;
        }
    },
    mounted() {
        let zm = document.getElementById("zm");
        let _this = this;
        html2canvas(zm, {
            onrendered: function(canvas) {
                // document.body.appendChild(canvas);
                _this.download = canvas.toDataURL();
            }
            // width: 300,
            // height: 300
        });
        this.check_status = this.$route.query.check_status || 5;
        this.loadzip();
    }
};
</script>
<style lang="scss" scoped>
.content {
    width: 620px;
    margin: 15px auto;
    font-size: 14px;
    font-family: "simsun";
    .zm {
        width: 620px;
        height: 823px;
        box-sizing: border-box;
        background: #ccc url(../assets/zm_bg.jpg) no-repeat;
        position: relative;
        top: 0;
        left: 0;

        .zsh {
            position: absolute;
            top: 230px;
            left: 400px;
            width: 140px;
            font-size: 12px;
            line-height: 12px;
            height: 12px;
        }
        .yh {
            position: absolute;
            top: 300px;
            left: 0px;
            width: 100%;
            font-size: 12px;
            line-height: 16px;
            text-align: center;

            span {
                font-family: "simhei";
                font-size: 16px;
                padding-left: 15px;
            }
        }
        .zpm {
            position: absolute;
            top: 330px;
            left: 80px;
            width: 440px;
            font-family: "simhei";
            font-size: 16px;
            line-height: 30px;
            text-indent: 2em;
            text-align: justify;
            span {
                font-size: 18px;
                color: #4786dc;
            }
        }
        ul {
            position: absolute;
            top: 410px;
            left: 130px;
            width: 370px;
            font-size: 12px;
            li {
                line-height: 22px;
                padding-bottom: 8px;
                text-align: justify;
            }
        }
        ol {
            position: absolute;
            top: 600px;
            left: 130px;
            width: 370px;
            font-size: 13px;
            font-family: "simhei";
            li {
                line-height: 22px;
                text-align: justify;
            }
        }
    }
}

#downBtn {
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.downloadBtn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    width: 150px;
    padding: 10px 0px;
    border-radius: 4px;
    color: #fff;
    background-color: #2c85cd;
    border-color: #2c85cd;
    font-size: 14px;
    box-sizing: border-box;
    margin-right: 15px;
    /*background: #fff;*/
    /*border: 1px solid #c4c4c4;*/
    /*color: rgb(31, 44, 61);*/
    /*margin: 0;*/
    /*margin: 20px 0 20px 250px;*/
}

.registerBook {
    width: 100%;
    /*height: 120px;*/
    /*background-color: #F9F9F9;*/
    /*margin: 20px auto;*/
    background-color: #e8e8e8;
    text-align: center;

    p {
        line-height: 5;
        margin-top: 15px;
        font-size: 20px;
    }
    p:last-child {
        font-size: 15px;
    }
}
</style>
